import React, {JSX} from 'react';
import {View,StyleSheet} from 'react-native';
import {BasicText} from '../text';
import {Props as BasicTextProps} from '../text/BasicText';

type Props = {
  width?: number;
  height?: number;
  backgroundColor?: string;
  borderRadius?:number
} & BasicTextProps;

function Tag({
  children,
  fontSize,
  fontWeight,
  color,
  width = 32,
  height = 18,
  backgroundColor = '#FFE5DD',
  borderRadius = 4,
}: Props): JSX.Element {
  const basicTextProps = React.useMemo(() => {
    return {
      fontSize,
      fontWeight,
      color,
    };
  }, [color, fontSize, fontWeight]);

  const styleProps = React.useMemo(() => {
    return {
      width,
      height,
      backgroundColor,
      borderRadius,
    };
  }, [backgroundColor, borderRadius, height, width]);

  return (
    <View style={[{...styleProps,borderRadius},styles.tag]}>
      <BasicText {...basicTextProps}>{children}</BasicText>
    </View>
  );
}


const styles = StyleSheet.create({
    tag:{
        justifyContent:'center',
        alignItems:'center',
    },
});

export default Tag;
